<template>
  <el-row>
    <el-col :span="20" class="el-colone">
      <el-input class="search" placeholder="请输入内容" v-model="list.address">
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getAddress"
        ></el-button>
      </el-input>
      <div id="container"></div>
      <div class="box">
        <span class="item">
          省/市/区：<span>{{ tableData.XZQH }}</span>
        </span>
        <span class="item"
          >街/路/巷：<span>{{ tableData.JLX }}</span>
        </span>
        <span class="item"
          >楼号：<span>{{ tableData.buildingNumber }}</span>
        </span>
        <span class="item"
          >楼层号：<span>{{ tableData.houseNumber }}</span>
        </span>
        <span class="item"
          >房间号：<span>{{ tableData.roomNumber }}</span>
        </span>
        <span class="item"
          >单元号：<span>{{ tableData.unitNumber }}</span>
        </span>
        <span class="item">
          匹配地址：<span>{{ tableData.all }}</span>
        </span>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { loadAMap } from "./map";
export default {
  mounted() {
    loadAMap()
      .then(() => {
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 11,
        });
      })
      .catch((err) => {
        console.log("err", err);
        console.log("高德地图加载失败");
      });
  },

  data() {
    return {
      tableData: [],
      addtableData: [], //跳转地图页面
      list: {
        address: "",
        token: window.sessionStorage["token"],
      },
    };
  },
  methods: {
    geoCode() {
      console.log(this.list.token);
      const _this = this;
      var geocoder = new AMap.Geocoder({});
      var marker = new AMap.Marker();
      var address = this.addtableData[0].all;
      console.log(address);
      geocoder.getLocation(address, function (status, result) {
        if (status === "complete" && result.geocodes.length) {
          _this.map.clearMap();
          marker.setPosition(result.geocodes[0].location.toString().split(","));

          console.log(result.geocodes[0].location.toString().split(","));

          _this.map.add(
            new AMap.Marker({
              position: result.geocodes[0].location.toString().split(","),
            })
          );
          // debugger;
          _this.map.setZoomAndCenter(
            13,
            result.geocodes[0].location.toString().split(",")
          );
          // _this.map.setFitView(marker);
        } else {
          console.log("根据地址查询位置失败");
        }
      });
    },

    async getAddress() {
      if (this.list.address == "") {
        this.$message.error("请输入内容");
        return;
      }
      this.addtableData = [];
      const { data: res } = await this.$http.post("matchonce", this.list, {
        headers: { "Content-Type": "application/json" },
      });
      console.log(res.data);
      this.$message.success(res.msg);
      this.tableData = res.data;
      this.addtableData.push(res.data);
      if (res.msg == "使用次数不足，请登陆") {
        this.$router.push({ path: "/login" });
      }
      this.geoCode();
    },
  },
};
</script>
<style scoped>
/* 地图 */
#container {
  width: 70%;
  height: 78vh;
  float: right;
  margin-top: 3%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.15);
}
.el-colone {
  margin-left: 14%;
}
/* 搜索框 */
.search {
  width: 25%;
  margin-top: 3%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.1);
}
.box {
  /* box-shadow: 1px 1px 1px #ccc;
  border: 1px solid #ccc;
  border-radius: 3px; */
  box-sizing: border-box;
  margin-top: 30px;
  width: 25%;
  height: 100%;
  color: #606266;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.2);
  padding: 30px;
}
.box > .item {
  text-indent: 1rem;
  width: 100%;
  padding: 32px 0px;
  display: block;
  border-bottom: 1px solid #ccc;
}

.el-coltwo {
  margin-top: 2%;
  margin-left: 14%;
}
.el-table {
  margin-top: 10px;
}
</style>